<template>
  <div @dblclick="x" class="c-el-table-cell">
    <input v-model.lazy="value" v-if="col.editable && onEdit"
           style="border:0; height:40px; width: 100%"
    />
    <span v-else><i :class="icon" v-if="icon"></i>{{label}}</span>
  </div>
</template>

<script>
  export default {
    props: {
      col: Object,
      row: Object
    },
    data () {
      const v = this.row[this.col.name]
      return {
        onEdit: false,
        value: v
      }
    },
    watch: {
      value () {
        this.$emit('eidt', this.row, this.col, this.value)
        this.onEdit = false
      }
    },
    computed: {
      label () {
        const v = this.row[this.col.name]
        // 默认情况
        if (!this.col.holder) return v
        // holder function
        if (this.col.holder === 'holder-function') {
          let holderFun = this.col['holderFunction']
          if (!holderFun) {
            throw new Error('Not found holder function!')
          }
          return holderFun(v, this.col)
        }
        // switch
        if (this.col.holder === 'switch') {
          return v ? this.col.activeText : this.col.inactiveText
        }
        if (this.col.holder === 'radio-group' ||
          this.col.holder === 'checkbox-group' ||
          this.col.holder === 'select'
        ) {
          let item = this.col.items.find(item => item.value === v)
          return item ? item.label : v
        }
        return v
      },
      icon () {
        const v = this.row[this.col.name]
        if (this.col.holder === 'switch') {
          return v ? this.col.activeIconClass : this.col.inactiveIconClass
        }
        return undefined
      }
    },
    methods: {
      x () {
        this.onEdit = !this.onEdit
      },
      blur () {
        this.onEdit = false
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
.c-el-table-cell
  input
    height 30px
    border #ffffff 1px solid
    float left
    zoom 1
    outline none
</style>
